<template>
  <div id="index">
    <div class="header">
      <span class="headerTitle">一体化预警系统</span>
    </div>
    <div class="body">
      <el-row style="height: 100%">
        <el-col span="12" style="height: 100%;padding: 0.625rem 0.625rem 0;">
          <div class="video">
            <video
              id="myVideo"
              class="video-js"
            >
              <source
                type="video/mp4"
                src="http://vjs.zencdn.net/v/oceans.mp4"
              >
            </video>
          </div>
        </el-col>
        <el-col span="12" style="height: 100%">
          <el-row style="height: 50%;padding: 0.625rem 0.625rem 0;">
            <div class="integratedWaring">一体化预警</div>
          </el-row>
          <el-row style="height: 50%;padding: 0.625rem 0.625rem 0;">
            <div class="fiber">光纤信息</div>
          </el-row>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
  export default {
    data(){
      return{

      }
    },
    mounted() {
      this.initVideo()
    },
    methods:{
      initVideo(){
        //初始化视频方法
        let myPlayer = this.$video(myVideo,{
          //确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。
          controls: true,
          //自动播放属性,muted:静音播放
          autoplay: "muted",
          //建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
          preload: "auto",
          //设置视频播放器的显示宽度（以像素为单位）
          width: "750px",
          //设置视频播放器的显示高度（以像素为单位）
          height: "750px"
        })
      }
    }

  }
</script>
<style>
  #index{
    width: 100%;
    height: 850px;
    margin: 0 auto;
    padding: 0.625rem 0.625rem 0;
  }
  .body{
    width: 100%;
    height: 90%;
  }
  /*.el-col{*/
  /*  height: 100%;*/
  /*  border: 1px solid rgba(25,186,139,0.17);;*/
  /*}*/
  .header{
    text-align: center;
  }
  .headerTitle{
    font-size: 1.875rem;
  }
  .video{
    height: 100%;
    /*border:3px solid #5a5e66;*/
  }
  .integratedWaring{
    height: 100%;
    border:3px solid #5a5e66;
  }
  .fiber{
    height: 100%;
    border:3px solid #5a5e66;
  }
</style>


